<template>
  <view class="page">
    <view v-if="status == 2">
      <view class="header">
        <image class="logo" :src="avatar"></image>
        <view class="name"
          >{{ realname }}
          <view style="" class="level">{{ name }}</view>
        </view>
      </view>
      <view class="tips">
        <view
          >代理编号码 <text>{{ id }}</text></view
        >
        <view
          >分成比例 <text>{{ rate }}%</text></view
        >
      </view>

      <view class="card">
        <view class="h1">
          <view class="view">
            <image
              src="https://ryjdshop.oss-cn-beijing.aliyuncs.com/wxapp/daili.png"
            ></image>
            代理中心
          </view>
          <view
            class="tx"
            @click="navTo('/bundle/pages/commission/withdraw/withdraw')"
          >
            可提现金额({{ brokerage }}元) <text>提现</text>
          </view>
        </view>

        <view class="content">
          <view
            v-for="(item, index) in list"
            @click="navTo(item.page)"
            :key="index"
          >
            <image :src="item.img"></image>
            <text>{{ item.title }}</text>
          </view>
        </view>
      </view>

      <view class="card">
        <view class="h1">
          <view class="view">
            <image
              src="https://ryjdshop.oss-cn-beijing.aliyuncs.com/wxapp/tj.png"
            ></image>
            收入统计
          </view>
        </view>

        <view class="stat">
          <view class="item">
            <text>今日收入</text>
            <text>￥{{ today_order_brokerage }}</text>
          </view>
          <view class="item">
            <text>本月收入</text>
            <text>￥{{ month_order_brokerage }}</text>
          </view>
          <view class="item">
            <text>累计收入</text>
            <text>￥{{ cumulative_brokerage }}</text>
          </view>
        </view>
      </view>

      <view class="card">
        <view class="h1">
          <view class="view">
            <image
              src="https://ryjdshop.oss-cn-beijing.aliyuncs.com/wxapp/pass.png"
            ></image>
            资金统计
          </view>
          <!-- <view class="pos">
						查看全部
					</view> -->
        </view>

        <view class="stat">
          <view class="item">
            <text>可提现</text>
            <text>￥{{ brokerage }}</text>
          </view>
          <view class="item">
            <text>已经提现</text>
            <text>￥{{ cumulative_brokerage - brokerage }}</text>
          </view>
          <view class="item">
            <text>可用余额</text>
            <text>￥{{ balance }}</text>
          </view>
        </view>
      </view>

      <view class="card">
        <view class="h1">
          <view class="view">
            <image
              src="https://ryjdshop.oss-cn-beijing.aliyuncs.com/wxapp/gift.png"
            ></image>
            邀请统计(用户)
          </view>
          <!-- <view class="pos">
						查看全部
					</view> -->
        </view>

        <view class="stat">
          <view class="item">
            <text>今日邀请</text>
            <text>{{ today_user }}</text>
          </view>
          <view class="item">
            <text>本月邀请</text>
            <text>{{ month_user }}</text>
          </view>
          <view class="item">
            <text>累计邀请</text>
            <text>{{ all_user }}</text>
          </view>
        </view>
      </view>
      <view class="card" v-show="false">
        <view class="h1">
          <view class="view">
            <image
              src="https://ryjdshop.oss-cn-beijing.aliyuncs.com/wxapp/gift.png"
            ></image>
            邀请统计(技师)
          </view>
          <!-- <view class="pos">
						查看全部
					</view> -->
        </view>

        <view class="stat">
          <view class="item">
            <text>今日邀请</text>
            <text>{{ today_technician }}</text>
          </view>
          <view class="item">
            <text>本月邀请</text>
            <text>{{ month_technician }}</text>
          </view>
          <view class="item">
            <text>累计邀请</text>
            <text>{{ all_technician }}</text>
          </view>
        </view>
      </view>
    </view>

    <view v-if="status != 2" class="cont">
      <view>
        <image class="contimage" src="'../../static/bgs.png'" mode=""></image>
      </view>
      <view class="main">
        <view class="title" style="text-align: center"> 申请成为分销会员 </view>

        <view class="" v-if="isSubmit === false">
          <view class="ipt">
            <text>真实姓名：</text>
            <u--input
              class="input"
              placeholder="请输入真实姓名"
              border="none"
              v-model="realname"
              fontSize="14"
            >
            </u--input>
          </view>
          <view class="ipt">
            <text>手机号码：</text>
            <u--input
              class="input"
              placeholder="请输入手机号码"
              border="none"
              v-model="tel"
              fontSize="14"
              type="number"
            ></u--input>
          </view>
          <view class="ipt start">
            <text>申请原因：</text>
            <textarea
              class="input textarea"
              placeholder="必填"
              v-model="reason"
            ></textarea>
          </view>
        </view>

        <view class="result" v-if="isSubmit === true">
          <view class="p1">
            {{
              status === 1
                ? "已提交，等待客服审核..."
                : status === 2
                ? "申请已通过"
                : "申请已被拒绝"
            }}
          </view>

          <view class="info" v-if="false">
            <view class=""> 真实姓名：<text>233</text> </view>
            <view class=""> 手机号码：<text>233</text> </view>
            <view class=""> 现住省份：<text>233</text> </view>
            <view class=""> 申请原因：<text>233</text> </view>
          </view>
        </view>
      </view>

      <view class="btn" @click="submit" v-if="status != 2">
        {{ isSubmit ? "重新申请" : "立即申请" }}
      </view>

      <view class="tips" v-if="status != 2">
        提交成功后，我们将会在1-2个工作日内给您回复
      </view>
      <view class="main" v-if="status == 2"
        >　
        <view class="" style="margin-bottom: 50rpx">
          <u-grid :border="false" col="4">
            <u-grid-item
              v-for="(listItem, listIndex) in list"
              :key="listIndex"
              @click="navTo(listItem.page)"
            >
              <image
                :src="listItem.img"
                style="width: 80rpx; margin-top: 30rpx; height: 80rpx"
                mode="widthFix"
              ></image>
              <text class="grid-text">{{ listItem.title }}</text>
            </u-grid-item>
          </u-grid>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
//import mpvueCityPicker from '../../components/mpvue-citypicker/mpvueCityPicker.vue';
export default {
	data() {
		return {
			text1: '成为分销会员，推广下级可获得额外收益，推广越多收益越多',
			name: '无',
			realname: '',
			tel: '',
			city: '',
			reason: '',
			avatar: '',
			nickname: '',
			unpaid_order: {
				name: '无'
			},
			unpaid: 1,
			show: false,
			code: '',
			isSubmit: null,
			status: 2,
			balance: 0,
			userData: {
				balance: 0
			},
			id: '',
			name: '默认等级',
			brokerage: 0,
			rate: 0,
			today_order_brokerage: 0,
			month_order_brokerage: 0,
			cumulative_brokerage: 0,
			list: [{
					name: 'photo',
					title: '技师佣金',
					img: '../../../static/images/icon_fenxiao.png',
					page: '/bundle/pages/mybrokerage/mybrokerage?type=1'
				},
				{
					name: 'lock',
					title: '用户佣金',
					img: '../../../static/images/icon_fenxiao.png',
					page: '/bundle/pages/mybrokerage/mybrokerage?type=0'
				},
				{
					name: 'star',
					title: '我的邀请',
					img: '../../../static/images/logistics_pay.png',
					page: '/bundle/pages/invitation/invitation?type=1'
				},

				// {
				// 	name: 'home',
				// 	title: '邀请技师,
				// 	img:'../../../static/images/logistics_delivered.png',
				// 	page:'/bundle/pages/h5-share/h5-share?type=2'
				// },
				{
					name: 'star',
					title: '邀请用户',
					img: '../../../static/images/logistics_delivered.png',
					//page: '/bundle/pages/h5-share/h5-share?type=0'
					// #ifdef H5
					page: '/bundle/pages/h5-share/h5-share?type=0'
					// #endif

					// #ifdef APP-PLUS
					page: '/pages/user/zhiwen-share/zhiwen-share'
					// #endif


				},
			],
			today_user: 0,
			month_user: 0,
			all_user: 0,
			today_technician: 0,
			month_technician: 0,
			all_technician: 0,
		};
	},
	components: {
		//mpvueCityPicker
	},
	onLoad() {
		this.loadData();
		this.init();
	},
	methods: {

		toBalance() {
			var that = this
			uni.showModal({
				title: '提现',
				content: '提现佣金到余额',
				success: function(res) {
					console.log(res)
					if (res.confirm) {
						that.$db.http('Distribution/toBalance', {
							money: that.brokerage
						}).then(res => {
							uni.showToast({
								title: "提现到余额成功！"
							})
						})
						that.loadData();
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		navTo(url) {
			uni.navigateTo({
				url
			});
		},
		async loadData() {


			this.$http.post('api/user/spreadInfo').then(res => {

				let {
					technician
				} = res;
				console.log(technician)
				this.today_order_brokerage = res.today_order_brokerage
				this.month_order_brokerage = res.month_order_brokerage
				this.today_user = res.today_user
				this.month_user = res.month_user
				this.all_user = res.all_user
				this.today_technician = res.today_technician
				this.month_technician = res.month_technician
				this.all_technician = res.all_technician
				let {
					avatar,
					realname,
					unpaid_order,
					unpaid,
					brokerage,
					id,
					rate,
					name,
					cumulative_brokerage,
					balance
				} = technician;
				this.id = id
				this.rate = rate
				this.name = name
				this.balance = balance
				this.cumulative_brokerage = cumulative_brokerage
				this.avatar = avatar
				this.brokerage = brokerage
				this.realname = realname
				this.unpaid_order = unpaid_order ? technician : {
					name: '无'
				};
				this.unpaid = unpaid ? unpaid : 0;
			})








		},
		init() {
			// 获取申请页
			this.$http.post('api/distribution/index').then(res => {
				console.log(res)
				// "status": 0 //0未申请；1待审核；2通过；3拒绝
				let {
					status
				} = res;
				this.status = status;
				console.log(this.status)
				this.isSubmit = Boolean(status);
			})

		},
		showCity() {
			this.$refs.city.showPicker = true;
		},
		onConfirm(e) {
			let {
				label
			} = e;
			this.city = label;
		},
		submit() {
			if (this.isSubmit) {
				this.isSubmit = !this.isSubmit;
				return;
			}
			let obj = {
				realname: this.realname,
				mobile: this.tel,
				reason: this.reason,
			}
			console.log(obj)
			let arr = Object.values(obj);
			console.log(arr)
			let onoff = arr.every(item => {
				return item;
			});
			if (!onoff) {
				uni.showToast({
					icon: 'none',
					title: '请输入完整信息'
				});
				return;
			}
			this.$http.post('api/distribution/apply', obj).then(res => {
				this.isSubmit = true;
				this.init()
			})
		},
		sure() {
			if (!this.code) {
				uni.showToast({
					icon: 'none',
					title: '请输入邀请码'
				});
				return;
			}
		},
	}
}
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background: url("https://ryjdshop.oss-cn-beijing.aliyuncs.com/admin/202210/202210192218520147664.png")
    no-repeat;
  background-size: 100% 300rpx;
  background-color: #f9f9fb;

  .contimage {
    width: 100%;
    height: 280rpx;
    position: fixed;
    top: 0;
    left: 0;
  }

  .header {
    padding: 60rpx 30rpx 30rpx;
    display: flex;
    align-items: center;

    .level {
      width: 120rpx;
      padding: 0 10rpx;
      height: 44rpx;
      line-height: 44rpx;
      margin-top: 6rpx;
      border-radius: 40rpx;
      font-size: 22rpx;
      background-color: #1e1e1e;
      text-align: center;
      color: #ffffff;
    }

    .logo {
      width: 125rpx;
      height: 125rpx;
      border-radius: 50%;
    }

    .name {
      font-size: 36rpx;
      font-weight: bold;
      margin: 0 20rpx;
    }

    .type {
      width: 180rpx;
      height: 50rpx;
    }
  }

  .tips {
    display: flex;
    margin-left: 30rpx;
    color: rgba(126, 126, 128, 1);
    font-size: 26rpx;
    margin-bottom: 40rpx;

    view {
      margin-right: 50rpx;
    }

    text {
      color: rgba(35, 42, 52, 1);
      font-weight: bold;
      margin-left: 15rpx;
    }
  }

  .card {
    margin: 30rpx;
    background-color: white;
    box-shadow: 0 0 0rpx 5rpx rgba(240, 240, 251, 0.2);
    border-radius: 20rpx;
    padding: 0 35rpx 60rpx;

    .h1 {
      padding: 30rpx 0 30rpx;
      position: relative;

      .pos {
        position: absolute;
        width: 200rpx;
        height: 76rpx;
        border-radius: 76rpx;
        box-sizing: border-box;
        border: 2rpx solid rgba(230, 230, 230, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        top: 50%;
        transform: translateY(-50%);
        right: 0rpx;
        font-size: 28rpx;
        font-weight: bold;
      }

      .view {
        display: flex;
        align-items: center;
        color: rgba(36, 35, 41, 1);
        font-weight: bold;
        font-size: 32rpx;

        image {
          width: 36rpx;
          height: 36rpx;
          border-radius: 50%;
          margin-right: 10rpx;
        }
      }

      .tx {
        color: rgba(126, 126, 128, 1);
        font-size: 28rpx;
        margin-top: 20rpx;
        display: flex;
        align-items: center;

        text {
          width: 100rpx;
          height: 40rpx;
          line-height: 40rpx;
          border: 2rpx solid rgba(201, 227, 240, 1);
          color: rgba(70, 128, 191, 1);
          display: flex;
          align-items: center;
          justify-content: center;
          box-sizing: border-box;
          border-radius: 40rpx;
          font-size: 24rpx;
          font-weight: normal;
          margin-left: 20rpx;
        }
      }
    }

    .content {
      padding-top: 35rpx;
      border-top: 2rpx solid rgba(241, 241, 241, 1);
      display: flex;

      view {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-items: center;

        image {
          width: 90rpx;
          height: 90rpx;
          border-radius: 50%;
        }

        text {
          color: rgba(71, 73, 77, 1);
          font-size: 23rpx;
          padding-top: 20rpx;
          font-weight: 500;
        }
      }
    }

    .stat {
      display: flex;

      .item {
        padding: 20rpx;
        flex: 1;
        //height: 90rpx;
        //margin-left: 20rpx;
        background-color: rgba(246, 246, 246, 1);
        color: rgba(102, 102, 102, 1);
      }

      .item:nth-child(2) {
        margin: 0 10rpx;
      }

      view {
        flex: 1;
        display: flex;
        flex-direction: column;
        color: rgba(106, 106, 106, 1);
        font-size: 28rpx;
        font-weight: bold;

        text:first-of-type {
          padding-left: 20rpx;
          position: relative;
          font-size: 23rpx;
        }

        text:first-of-type::after {
          content: "";
          width: 10rpx;
          height: 30rpx;
          background-color: rgba(2, 178, 132, 1);
          position: absolute;
          top: 50%;
          left: 0;

          font-weight: bold;
          transform: translateY(-50%);
          border-radius: 10rpx;
        }

        text:last-of-type {
          margin-top: 10rpx;
          color: rgba(53, 53, 53, 1);
          padding-top: 10rpx;
          font-size: 30rpx;
          color: #1e1e1e;
          font-weight: normal;
        }
      }

      view:nth-of-type(2) {
        text:first-of-type::after {
          content: "";
          width: 10rpx;
          height: 30rpx;
          background-color: rgba(255, 97, 0, 1);
          position: absolute;
          top: 50%;
          left: 0;
          transform: translateY(-50%);
          border-radius: 10rpx;
        }
      }

      view:nth-of-type(3) {
        text:first-of-type::after {
          content: "";
          width: 10rpx;
          height: 30rpx;
          background-color: rgba(67, 80, 254, 1);
          position: absolute;
          top: 50%;
          left: 0;
          transform: translateY(-50%);
          border-radius: 10rpx;
        }
      }
    }

    .channel {
      display: flex;

      &-view {
        height: 130rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-radius: 10rpx;
        color: white;
        font-size: 28rpx;
        font-weight: bold;
        padding: 20rpx;

        text {
          font-size: 36rpx;
          margin-top: 10rpx;
        }
      }

      &-view:first-of-type {
        width: 250rpx;
        flex-shrink: 0;
        background-color: rgba(58, 125, 255, 1);
      }

      &-view:nth-of-type(2) {
        flex: 1;
        height: 130rpx;
        margin-left: 20rpx;
        background-color: rgba(246, 246, 246, 1);
        color: rgba(102, 102, 102, 1);

        text {
          color: rgba(51, 51, 51, 1);
        }
      }
    }
  }

  .main {
    margin: 50rpx 20rpx 0;
    background-color: white;
    border-radius: 20rpx;
    padding: 21rpx 0 0;
    overflow: hidden;
    position: relative;
    z-index: 99;

    .title {
      color: #333;
      font-size: 38rpx;
      font-weight: bold;
      // text-align: center;
      margin-bottom: 30rpx;
    }

    .ipt {
      font-size: 28rpx;
      color: #303133;
      display: flex;
      align-items: center;
      border: 2rpx solid #e5e5e5;
      padding: 20rpx 28rpx;
      margin: 0 32rpx 32rpx;

      text {
        color: #303133;
        font-size: 28rpx;
        width: 5em;
        flex-shrink: 0;
      }

      .input {
        flex: 1;
      }
    }

    .textarea {
      font-size: 28rpx;
      height: 80rpx;
    }

    .start {
      align-items: flex-start;
    }
  }

  .btn {
    margin: 20rpx;
    height: 86rpx;
    line-height: 86rpx;
    text-align: center;
    border-radius: 86rpx;
    color: white;
    font-size: 32rpx;
    background-color: #ff2c3c;
  }

  .tips {
    color: #666;
    font-size: 24rpx;
    text-align: center;
    padding: 20rpx 0;
  }

  .h1 {
    padding: 26rpx;
    text-align: center;
    font-size: 36rpx;
    color: #303133;
  }

  .popup {
    width: 620rpx;

    .enter {
      display: flex;
      padding: 0 32rpx;
      align-items: center;
      margin-top: 20rpx;

      text {
        width: 5em;
        color: #333;
        font-size: 28rpx;
      }

      input {
        flex: 1;
        font-size: 28rpx;
      }
    }

    .sure {
      padding: 0 96rpx;
      height: 84rpx;
      background-color: #ff2c3c;
      color: white;
      font-size: 28rpx;
      display: flex;
      text-align: center;
      justify-content: center;
      line-height: 84rpx;
      margin: 64rpx;
      border-radius: 10rpx;
    }
  }

  .result {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .icon {
      width: 106rpx;
      height: 106rpx;
    }

    .p1 {
      color: #303133;
      font-size: 28rpx;
      margin-top: 10rpx;
      padding-bottom: 30rpx;
    }

    .info {
      padding: 30rpx 14rpx 30rpx;
      width: calc(100% - 28rpx);
      border-top: 2rpx solid #e5e5e5;

      view {
        color: #303133;
        font-size: 28rpx;
        padding: 10rpx 30rpx;
      }
    }
  }
}
</style>
